<template>
  <div class="logStrategy">
    <base-form :formState="formState" ref="getbaseForm">
    </base-form>
    <div class="table-bottom_fiexd" :style="styleWidth">
      <a-button type="primary" @click="saveButton">保存</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import baseForm from '@/components/form/baseForm.vue';
import { logStrategy } from './formCofig';
import { cloneDeep } from 'lodash';
import request from "@/api/index";
import { useFixeWidth, styleWidth } from '@/hooks/useFixeWidth'
import { message } from "ant-design-vue";
// TS
interface dataSourceType {
  [propName: string]: any;
}
//data
const formState = ref<(dataSourceType)[]>(cloneDeep(logStrategy));
const getbaseForm = ref();
// method
const getDetail = () => {
  request.fetchStatisticsLogStrategyDetail({}).then((res: dataSourceType) => {
    let data = res;
    formState.value[0].children.forEach((params: dataSourceType) => {
      for (let item in data) {
        if (params.param == item) {
          params.value = data[item]
        }
      }
    })

  })
}
const saveButton = () => {
  let data: dataSourceType = {
    "dangerSmsTmpId": "",
    "dangerThreshold": 0,
    "noticeEmailList": "",
    "noticeSmsList": "",
    "tableSize": "",
    "warnSmsTmpId": "",
    "warnThreshold": 0
  };
  formState.value[0].children.forEach((params: dataSourceType) => {
    data[params.param] = params.value;
  })
  console.log(getbaseForm.value, 'getbaseForm.value')
  getbaseForm.value.baseForm.validate().then(() => {
    request.updateLogStrategyDetail(data).then((res: dataSourceType) => {
      if (res.code == '00000 00000') {
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    })
  }).catch((err: any) => {
    message.error('请检查必填项！');
  })

}
//watch
watch(() => formState.value[0].children[1].value, (newVal, oldVal) => {
  if (newVal !== oldVal) {
    formState.value[0].children[2].min = newVal;
    // if (formState.value[0].children[2].value < newVal) {
    //   formState.value[0].children[2].value = newVal;
    // }
  }
})
// mounted
onMounted(() => {
  getDetail();
  useFixeWidth();
})
</script>
<style lang="less" scoped>
.logStrategy {
  background-color: #fff;
  width: 100%;
  height: calc(100% - 120px);
  padding: 0 16px;
  padding-left: 0px;
  box-sizing: border-box;
  overflow-y: auto;
  padding-bottom: 16px;

  .table-bottom_fiexd {
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    background: #fff;
  }
}
</style>
<style lang="less">
.logStrategy .baseForm {
  padding-top: 1px;
}

.logStrategy .baseForm .ant-form-item .ant-form-item-label {
  width: 126px;
}
</style>